<template>
    <div>
        <Collapse v-model="transformer_substation">
            <Panel name="2" style="font-size:17px;">
                变电站
                <p slot="content">
                    <ul class = 'itemlist'>
                        <li class="item" @click="handleCheck(item)" v-for="(item,key) in transformer_substationlist" :key = "key">
                            <div class="itemdiv" :style="{'background': '#e4e4e4','color':'#333'}">
                                {{item.name}}
                            </div>
                        </li>
                    </ul>
                </p>
            </Panel>
        </Collapse>
    </div>
</template>
<script>
import util from '../../util/util'
export default {
    data(){
        return {
            transformer_substation:'2',
            transformer_substationlist:[],
        }
    },
    created(){
        this.get_Ts_Type_Group();
    },
    methods:{
        handleCheck(item){
            if(this.$router.history.current.name=='devstatus_index'){
                this.$store.commit('ClickDevstatus',item);
                this.$router.push({name:'devstatus_detail'});
            }else if(this.$router.history.current.name=='devgroup_index'){
                this.$store.commit('ClickDevstatus',item);
                this.$router.push({name:'devgroup_detail'});
            } 
        },
        get_Ts_Type_Group:function(){
            let vm = this;
            util.ajax({
                method: 'get',
                url: '/util-api-sgdlist/'
            })
            .then(function (response) {
                if(response.status==200){
                    vm.transformer_substationlist = [];
                    for(let i = 0;i<response.data.substation.length;i++){
                        vm.transformer_substationlist.push(response.data.substation[i]);
                    }
                }else{
                    vm.$Message.error('获取变电站列表失败');
                }
            })
            .catch(function(err){
                vm.$Message.error('网络错误');
            })
        },
    }
}
</script>
<style scoped>
    .itemlist{
        list-style: none;
        display: flex;
    }
    .item{
        display: inline-block;
        padding: 5px;
        cursor: pointer;
    }
    .itemdiv{
        width: 176px;
        height: 99px;
        margin: auto;
        padding: 21px;
        display: inline-block;
        font-size: 17px;
        text-align: center;
        color: #ffffff;
        border-radius: 4px;
    }
</style>
